<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉搜索测试</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
</head>
<body>
    
     <div style="width: 400px; margin: 0 auto;margin-top: 300px;">
        <h3>这是一个测试下拉搜索的页面</h3>
        <select id="para_list" name="para_list" class="form-control" style="width: 100%;">
            <option value=""></option>
		    <option value="1">中国</option>
			<option value="2">阿富汗伊斯兰国</option>
			<option value="3">安哥拉共和国</option>
			<option value="4">安圭拉</option>
			<option value="5">奥兰群岛</option>
			<option value="6">阿尔马尼亚共和国</option>
		    <option value="7">安道尔公国 </option>
		</select>

     </div>
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
     <script>

        $('#para_list').select2({
            placeholder: '请选择'
        });
     </script>
   
</body>

</html>